<template>
  <div>
    <el-divider></el-divider>
    <div style="font-size:20px;text-align:left">
      <i class="el-icon-document-checked">窗口收费</i>
    </div>
    <el-divider></el-divider>
    <h3 align="left">患者信息查询</h3>
    <el-row>
      <el-col :span="8" align="left">
        <div>
          <i class="el-icon-tickets">病历号：</i>
          <el-input style="width:350px" v-model="caseNumber" placeholder="请输入病历号"></el-input>
        </div>
      </el-col>
      <el-col :span="8" align="left">
        <div>
          <i class="el-icon-user">患者名：</i>
          <el-input  v-model="realName" placeholder="请输入患者名"></el-input>
        </div>
      </el-col>
      <el-col :span="8"  align="left" style="display: flex;justify-content: left; align-items: flex-end">
        <el-button type="primary" @click="searchPatient">搜索</el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <h3 align="left">患者信息确认</h3>
    <el-row>
      <el-col :span="6" align="left">
        <div>
          <i class="el-icon-user">患者名：</i>
          <el-input style="width:200px" disabled v-model="patient.realName" ></el-input>
        </div>
      </el-col>
      <el-col :span="6" align="left">
        <div>
          <i class="el-icon-postcard">身份证号：</i>
          <el-input style="width:200px" disabled v-model="patient.cardNumber" ></el-input>
        </div>
      </el-col>
      <el-col :span="6" align="left">
        <div>
          <i class="el-icon-date">年龄：</i>
          <el-input style="width:200px" disabled v-model="patient.age" ></el-input>
        </div>
      </el-col>
      <el-col :span="6" align="left">
        <div>
          <i class="el-icon-male">性别：</i>
          <el-input style="width:100px" disabled v-model="patient.gender" ></el-input>
        </div>
      </el-col>
    </el-row>

    <div align="left" style="margin-top:10px">
      <el-button type="primary" style="width:200px" disabled icon="el-icon-price-tag">项目金额：{{calTotalPrice}}元</el-button>
      <el-button type="primary" icon="el-icon-price-tag" @click="expenseCharge">收费结算</el-button>
    </div>
    <el-table style="margin-top:10px;width:90%" :data="price_project_table" @selection-change="priceSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="itemName" label="项目名称" ></el-table-column>
      <el-table-column prop="itemPrice" label="单价" width="80"></el-table-column>
      <el-table-column prop="itemType" label="类型" width="80"></el-table-column>
      <el-table-column prop="itemFormate" label="规格" width="200"></el-table-column>
      <el-table-column prop="itemNumber" label="数量" width="80"></el-table-column>
      <el-table-column prop="itemCreateTime" label="开立时间" width="200"></el-table-column>
    </el-table>
    
  </div>
</template>
<script>
import {ElMessage} from "element-plus";

export default{
  data(){
    return {
      //检查项目状态改变的数据
      expense_charge_select:[],
      patient:{
        realName:'',
        caseNumber:'',
        age:0,
        gender:'',
        cardNumber:''
      },
      //检查项目表格的数据
      price_project_table:[],
      realName:'',
      caseNumber:''
    }
  },
  methods:{

    //查询患者
    searchPatient:function ()
    {
      let  value={
        realName:this.realName,
        caseNumber:this.caseNumber
      }
      let url='http://localhost:8092/register/selectpatient'
      this.$axios.post(url,value).then(resp=>{
        this.patient=resp.data.result;
      //JSON.stringify(this.patient)=='{}'
        if(!this.patient)
        {
          ElMessage({
            type:'info',
            message:'该病历不存在'
          })
          return
        }
        //得到患者的检查项目
        //let url2='http://localhost:8092/medicaltechnology/selectbyregiserid'
        // let value2={
        //   checkState:'已开立',
        //   registerId:this.patient.id
        // }
        let url2=`http://localhost:8092/common/selectbyregister/${this.patient.id}`

        this.$axios.get(url2,this.price_project_table).then(resp=>{

          console.log(resp.data.result)
          if(resp.data.result.length == 0){
            ElMessage({
              type:'info',
              message:'该患者没有检查项目'
            })
            return
          }
          this.price_project_table=resp.data.result
          console.log(this.price_project_table)
        }).catch(error=>{
          console.log(error)
        })
        //
      })
    },

    //检查项目状态改变时的函数
    priceSelectionChange:function (rows){
      this.expense_charge_select=rows
      console.log(this.expense_charge_select)
    },
    //缴费
    expenseCharge:function ()
    {
      let ids=this.expense_charge_select.map(item=>item.rid)
      //let url=`http://localhost:8092/checkrequest/updatestate/${ids}/2`
      let url=`http://localhost:8092/common/updatestate`
      this.$axios.post(url,this.price_project_table).then(resp=>{
        ElMessage({
          type:'success',
          message:'缴费成功！'
        })
        this.price_project_table=[]
        this.searchPatient()
      }).catch(error=>{
        console.log(error)
      })
    }

  },
  computed:{
    //计算属性:直接当属性使用
    calTotalPrice:function ()
    {
      if(this.price_project_table.length>0)
      {
        //es6中map,fiter,reduce
        let total=this.price_project_table.reduce((total,item)=>total+item.itemPrice,0)
        return  total.toFixed(2)
      }
      else
      {
        return 0
      }

    }
  },
  mounted() {
  }
}
</script>

